<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择选项卡笔记</title>
</head>
<body>
	<form action="">
		游戏：<input type="checkbox" name="love" value="game">
		电影：<input type="checkbox" name="love" value="movie">
		编码：<input type="checkbox" name="love" value="program">
              <input type="button" value="全选" id="selectAll">
	          <input type="button" value="取消" id="cancel">
	          <input type="button" value="反选" id="reverse">
	</form>
    <script>
   	var selectAll = document.querySelector('#selectAll');//+All是全选
   	var cancel = document.querySelector('#cancel');
    var reverse = document.querySelector('#reverse');
    selectAll.onclick = function() {// selectAll 命名一个函数
    var love = document.querySelectorAll('input[name="love"');
    //找到html标签里面的对象
    		console.log(love);//打印 查看自己有没有写错
    	for(var i = 0;i < love.length; i++) { //循环给值
    			love[i].checked = 'checked'; //css的代码在js里的表现
    		}
    }
     cancel.onclick = function() {
    		var love = document.querySelectorAll('input[name="love"');
    		console.log(love);
    	for(var i = 0;i < love.length; i++) {
    			love[i].checked = '';
    		}
    }
     reverse.onclick = function() {
    		var love = document.querySelectorAll('input[name="love"');
    		console.log(love);
    	for(var i = 0;i < love.length; i++) {
    			love[i].checked = !love[i].checked;
    		}
    }
    </script>
</body>
</html>